import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { Toast, NavBar } from 'react-vant';
import { Rate } from 'react-vant';
import style from './index.module.css'
const Index: React.FC = () => {
    const navigate = useNavigate()
    const [isLike, setIsLike] = useState(false);
    const gz = () => {
        setIsLike(!isLike)
    }
    const [value, setValue] = useState(5);
    return (
        <div>
            <NavBar
                onClickLeft={() => navigate(-1)}
            />
            <div className={style.q1}>
                <img src="../src/assets/100_03.jpg" alt="" />
                <div className={style.aa}>
                    <b style={{ fontSize: '30px' }}>李凤娇</b>  <button className={style.btn} onClick={gz}>{isLike ? '取消关注' : '+关注'}</button>
                    <p>住院医师 皮肤科</p>
                    <p>北京京都儿童医院 <span className={style.q2}>三丙</span></p>
                </div>
            </div>
            <div className={style.q3}>
                <div className={style.q4}>
                    <b>暂无</b>
                    <p>挂号量</p>
                </div>
                <div className={style.q4}>
                    <b className={style.zi}>207</b>
                    <p>咨询量</p>
                </div>
                <div className={style.q4}>
                    <b>100%</b>
                    <p>好评率</p>
                </div>
                <div className={style.q4}>
                    <b>1197</b>
                    <p>粉丝数</p>
                </div>
            </div>

            <div className={style.box}>
                <div className={style.box1}>
                    <img src="../src/assets/104_03.jpg" alt="" style={{ width: '100%' }} />
                    <h4>预约挂号</h4>
                    <p>未开通</p>
                </div>
                <div className={style.box1}>
                    <img src="../src/assets/104_05.jpg" alt="" style={{ width: '100%' }} />
                    <h4>在线咨询</h4>
                    <p>1v1咨询</p>
                </div>
                <div className={style.box1}>
                    <img src="../src/assets/104_07.jpg" alt="" style={{ width: '100%' }} />
                    <h4>私人医生</h4>
                    <p>未开通</p>
                </div>
                <div className={style.box1}>
                    <img src="../src/assets/104_09.jpg" alt="" style={{ width: '100%' }} />
                    <h4>专科服务</h4>
                    <p>未开通</p>
                </div>
            </div>

            <div className={style.hh}>
                <h1>患者评论</h1> <span>更多</span>
            </div>

            <div className={style.pl}>
                <div className={style.p2}>
                    <p><span style={{ color: '#ccc', fontSize: "16px" }}>186*****505 </span><span><Rate color='yellow' value={value} onChange={setValue} /></span>  <span style={{ fontSize: '16px', color: '#ccc', paddingLeft: '40px' }}>2024.08.30</span></p>
                    <p>在宝宝皮肤病问题方面已经多次咨询过李老师，解答仔细,细心讲解，态度温和，诊断精准。我很信任，所以多次来请教。</p>
                </div>
                <div className={style.p2}>
                    <p><span style={{ color: '#ccc', fontSize: "16px" }}>136*****253 </span><span><Rate color='yellow' value={value} onChange={setValue} /></span>  <span style={{ fontSize: '16px', color: '#ccc', paddingLeft: '40px' }}>2024.07.19</span></p>
                    <p>医生很好,但是还没有问完还想咨询两个问题可以赠送两个问题的机会吗</p>
                </div>
            </div>

           <p className={style.bb}>- 让医疗健康服务不再难 -</p>
        </div>
    )
}

export default Index
